import React, { Component } from 'react'
//规定prop类型
import PropTypes from 'prop-types'

//生成随机字符串id
import {nanoid} from 'nanoid'
import './index.css'
export default class Header extends Component {
    //对接收的props进行：类型、必要性的限制
    static propTypes = {
        addTodo:PropTypes.func.isRequired
    }
    //键盘事件回调
    handleKeyUp = (event)=>{
        //解构赋值获取keyCode,target
        const {keyCode,target}= event
        //event.keyCode按键编号,判断是否回车按键
        if(keyCode !== 13)return
        //添加的todo名字不能为空
        if(target.value.trim()===''){
            alert('输入不能为空')
            return
        }
        const todoObj = {id:nanoid(),name:target.value,done:false}
        this.props.addTodo(todoObj)
        //清空input
        target.value = ''
    }
    
    render() {
        return (
            <div className="todo-header">
              <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        )
    }
}
